import { useStore } from 'vuex'
import { computed } from 'vue'
import { KeyHandler, HotkeysEvent } from 'hotkeys-js'
import { GlobalDataProps } from '../store/index'
import useHotKey from '../hooks/useHotKey'
const wrap = (callback: KeyHandler) => {
    const wrapperFn = (e: KeyboardEvent, event: HotkeysEvent) => {
        e.preventDefault()
        callback(e, event)
    }
    return wrapperFn
}
export default function initHotKeys() {
    const store = useStore<GlobalDataProps>()
    const currentId = computed(() => store.state.editor.currentElement)
    useHotKey('ctrl+c, command+c', () => {
        store.commit('copyComponent', currentId.value)
    })
    useHotKey('ctrl+v, command+v', () => {
        store.commit('pasteCopiedComponent')
    })
    useHotKey('backspace, delete', () => {
        store.commit('deleteComponent', currentId.value)
    })
    useHotKey('esc', () => {
        store.commit('setActive', '')
    })
    useHotKey('up', wrap(() => {
        store.commit('moveComponent', { direction: 'Up', amount: 1, id: currentId.value })
    }))
    useHotKey('down', wrap(() => {
        store.commit('moveComponent', { direction: 'Down', amount: 1, id: currentId.value })
    }))
    useHotKey('left', wrap(() => {
        store.commit('moveComponent', { direction: 'Left', amount: 1, id: currentId.value })
    }))
    useHotKey('right', wrap(() => {
        store.commit('moveComponent', { direction: 'Right', amount: 1, id: currentId.value })
    }))
    useHotKey('shift+up', () => {
        store.commit('moveComponent', { direction: 'Up', amount: 10, id: currentId.value })
    })
    useHotKey('shift+down', () => {
        store.commit('moveComponent', { direction: 'Down', amount: 10, id: currentId.value })
    })
    useHotKey('shift+left', () => {
        store.commit('moveComponent', { direction: 'Left', amount: 10, id: currentId.value })
    })
    useHotKey('shift+right', () => {
        store.commit('moveComponent', { direction: 'Right', amount: 10, id: currentId.value })
    })
}